<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/font/iconfont.css">
    <link rel="stylesheet" href="../assets/notice/notice.css">
    <script src="../assets/notice/notice.js"></script>
    <script src="../assets/axios/axios.js"></script>
    <script>
        function errorFun(error) {
            if (error instanceof axios.AxiosError) {
                if (error.code == "ECONNABORTED") {
                    notice({
                        icon: "warning",
                        title: "请求超时,请稍后重试"
                    })
                } else if (error.code == "ETIMEDOUT" || error.code == "ERR_NETWORK") {
                    notice({
                        icon: "error",
                        title: "网络异常,请检查网络连接"
                    })
                } else if (error.response) {
                    switch (error.response.status) {
                        case 401:
                        case 403:
                            notice({
                                icon: "error",
                                title: "未授权"
                            })
                            break;
                        case 404:
                            notice({
                                icon: "error",
                                title: "您所访问的资源不存在"
                            })
                            break;
                        case 500:
                            notice({
                                icon: "error",
                                title: "服务器异常,请联系管理员"
                            })
                            break;
                        default:
                            notice({
                                icon: "error",
                                title: "服务器忙,请稍后重试"
                            })
                            break;
                    }
                }

            } else {
                notice({
                    icon: "error",
                    title: "运行错误,请联系管理员"
                })
            }
        }

        // 常量定义 建议以全大写方式定义
        const ERROR_MSG = {
            ECONNABORTED:"请求超时,请稍后重试",
            ETIMEDOUT:"网络异常,请检查网络连接",
            ERR_NETWORK:"网络异常,请检查网络连接"
        }
        const HTTP_MSG = {
            401:"未授权",
            403:"未授权",
            404:"您所访问的资源不存在",
            500:"服务器异常,请联系管理员",
            DEFAULT:"服务器忙,请稍后重试"
        }
        // 为基于axios发送请求，在请求发出之后增加一个then函数的回调模板
        axios.interceptors.response.use(
            // promise 的 成功回调
            function (response) {
                console.log("拦截器 response 成功",response)
                // return "拦截器范围-成功"
                return response.data
            },
            // promise 的 失败回调
            function (error) {
                // console.log("拦截器 response 失败",error)
                // return "拦截器范围-失败"
                let title = "运行错误,请联系管理员";
                let icon = "error";
                if (error instanceof axios.AxiosError) {
                    console.log( error )
                    console.log( error.toJSON() );
                    // let errorJSON = error.toJSON();
                    // errorJSON.status
                    // errorJSON.code
                    // if(errorJSON.status){}
                    let { status,code } = error.toJSON();

                    if( code == "ECONNABORTED" ) icon = "warning";

                    if(status){
                        title = HTTP_MSG[status] || HTTP_MSG.DEFAULT;
                    }else{
                        title = ERROR_MSG[code];
                    }
                } 
                // else {
                //     title = "运行错误,请联系管理员";
                // }

                // notice({
                //     icon:icon,
                //     title:title
                // })

                notice({ icon, title })
                return Promise.reject(error);
            }
        )
        function sendAjaxFun() {
            axios.get("http://127.0.0.1:3000/api/users",{
                // timeout:2000
            })
            // 装载一个axios 定义的拦截器方法
            // .then(function(){},function(error){})
            .then(function (data) {
                // asdasdasda
                console.log(data)
            })
            // .catch(errorFun)
        }
    </script>
</head>

<body>
    <input type="button" value="ajax-error" onclick="sendAjaxFun()">
</body>

</html>